<!DOCTYPE html>
<html>
<head>
<title>Home Screen</title>
	<!-- Jquery -->
	<script src="js/jquery-1.11.2.min.js"></script>
	<!-- AngularJS -->
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
	<!-- Angular application -->
	<script type="text/javascript" src="js/home.js"></script>
	<script type="text/javascript" src="js/MessageUpdate.js"></script>
	<!-- Bootstrap -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/home.css"/>
</head>

<body class="mainbg">
<div ng-app="homeApp">

	<!-- The NAV bar with buttons and header -->
	<nav class="navbar navbar-default navStyle" role="navigation">
   		<div ng-controller="MessageUpdate" >
   		<div class="navbar-header">
   			<h2 class="headerStyle">Welcome to Surfers Paradise</h2></div>
   		<div class="navbar-collapse collapse" id="navbar-footer">
       		<ul class="nav navbar-nav navbar-right">
   				<li><button type="button" class="disbtn btn btn-danger navbar-btn " ng-click="changemessages(true); update();">Discover users</button></li>
   				<li><button type="button" class="disbtn btn btn-danger navbar-btn "	ng-click="changemessages(false); update();">Display only messages of users
					who I follow</button></li>
				<li><button type="button" class="logoutbtn btn btn-danger navbar-btn " ng-click="Logout()">Log-out</button></li>
					
 			</ul>
 		</div>
 		</div>
   </nav>
   
   <!-- Angular controller for type and post a new message -->
		<div ng-controller="homeController" >
			{{ CheckSession()}}
		<form novalidate name="MessageForm" class="form-group" ng-submit="MessageForm.$valid && AddMessage()">
			<!-- Message -->
			<textarea class="Usermessage" rows="4" id="Message" name="Message" placeholder="Type your message here" ng-model="Message" ng-maxlength=140 required></textarea>
			<div>
				<small class="errMsg" ng-show="MessageForm.Message.$error.maxlength">
        			Message must be no longer than 140 characters</small>
        	</div>
   
       		<div><label class="TypedMsg" for="Description" >Your Message:</label>
				<span ng-bind-html="highlight(Message)"></span> 
			</div>
        	<!-- Post Button -->
        	<button type="submit" class="Mybutton">Post</button>
        </form>
					
		<div class="line-separator"></div>
		</div>
		
		<!-- Angular controller for view the messages that were posted -->
		<div ng-controller="MessageUpdate" >
			
			<div id="messageDesply" ng-repeat="x in TenMessagesArray track by x.MessageId" >
    			<div class="message">
					<div class="messageBody">
						<div class="messageHead">
							<div class="pull-left about">Topic - <a href="topic.html?topic={{x.Topic}}" class="highlight" ng-bind="x.Topic"></a>: </div>
								<br/><span class="msgStyle" ng-bind-html="setcheck(x.HtmlTopicVersion)"></span>
							<div>
								<br><span class="posted">Posted by <a class="highlight2" href="MyProfile.html?profile={{x.Autor}}" ng-bind="x.Autor"></a> </span><span class="posted" ng-bind=" x.TimeOfPublish | HomeMessageDate"></span>
							</div>
						</div>
					</div>
				</div>
				
				<!-- The reply, republish, follow options after all posted message -->					
  				<div class="form-group">
        			<div class="col-md-55 control">
            			<div class="MessageOptions"  >
                			<a class="MessageOptionStyle" ng-click=" toshowReply=!toshowReply; Messageoption = '@' + x.Autor; toshowRepublish = 0">
                				Reply
                			</a>
               					|
                			<a class="MessageOptionStyle" ng-click="toshowRepublish= !toshowRepublish; Messageoption = 'RE:' + x.Content; toshowReply = 0">
                				Republish
               				</a>
                				|
                			<a class="MessageOptionStyle" ng-click="follow(x.Autor)">
                				Follow <span ng-bind="x.Autor"></span>
                			</a>                
                		</div>
             		</div>
        		</div>
        		
        		
        		<!-- Alert message when a user start follow another user -->
		<div class="alert alert-success succAlert" id="successAlert" role="alert">
  			<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  			<strong>You started follow this user</strong>
		</div>

		<!-- Alert message when a user try to follow a user that he is already follow -->
		<div class="alert alert-danger errAlert fade-in" id="errorAlert" role="alert">
  			<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  			<strong>You are already follow this user</strong> 
		</div>
		
		<!-- Alert message when a user try to follow a user that he is already follow -->
		<div class="alert alert-info postAlert fade-in" id="postAlert" role="alert">
  			<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  			<strong>You posted a new message</strong> 
		</div>
        		
  				
  				<!-- the message box that opens when a user clicks a "reply" or "republish" option  -->
        		<form novalidate name="MessageOptionForm" class="form-group" ng-submit="MessageOptionForm.$valid && AddSubMessage(Messageoption,toshowRepublish,x.MessageId)" ng-show="(toshowRepublish || toshowReply)">
        			<!-- Message -->
					<textarea class="Usermessage" rows="4" id="Message" name="Message" placeholder="Message" ng-model="Messageoption" ng-maxlength=140 required></textarea>	
					<div>
						<small class="errMsg" ng-show="MessageForm.Message.$error.maxlength">
        					Message must be no longer than 140 characters</small>
        			</div>
        			<!-- post Button -->
					<button type="submit" class="Mybutton">Post</button>
  				</form>
  			</div>
  		</div>
	</div>
</body>
</html>